<template>
  <div class="layout">
      <!-- 头部 -->
     <header>
       <img class="h_img" src="../../images/liushuxue/logo2x.png" alt="">
       <div class="h_txtfather">
         <a href="javascript:;">
          <input type="text" class="h_txt" placeholder="情人节鲜花" />
          <span class="glyphicon glyphicon-search h_span"></span>
         </a>
       </div>
       <a class="h_login" href="/#/login">登陆</a>
     </header>
     <!-- 轮播图 -->
   <div class="swiper_father">
    <mt-swipe :auto="4000" class="swipe" >
    <mt-swipe-item v-for="item in list" :key="item.id">
      <img :src="item.src" alt="">
    </mt-swipe-item>
    <!-- <mt-swipe-item>
      <img src="../../images/liushuxue/17_yga_m.jpg" alt="">
    </mt-swipe-item>
    <mt-swipe-item>
       <img src="../../images/liushuxue/18_valentine_m.jpg" alt="">
    </mt-swipe-item> -->
    </mt-swipe>
    </div>
     <!-- 认证龙头企业 -->
    <div class="identification">
      <ul>
        <li>
          <p>认证龙头企业</p>
        </li>
        <li>
          <p>13年品牌</p>
        </li>
        <li>
          <p>3小时送花</p>
        </li>
        <li>
          <p>最近
             <a href="javascript:;">238433</a>
             条好评
         </p>
        </li>
      </ul>
    </div>
     <!-- 鲜花 -->
    <div class="flower">
      <ul>
        <li>
          <a href="/#/categorylist">
            <img src="../../images/liushuxue/yongshenghua_icon.png" alt="">
            <p>鲜花</p>
          </a>
        </li>
        <li>
          <a href="/#/categorylist">
            <img src="../../images/liushuxue/yongshenghua_icon.png" alt="">
            <p>永生花</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="../../images/liushuxue/cake_icon.png" alt="">
            <p>蛋糕</p>
          </a>
        </li>
        <li>
          <a href="/#/gifts">
            <img src="../../images/liushuxue/gift_icon.png" alt="">
            <p>礼品</p>
          </a>
        </li>
        <li>
          <a href="/#/gifts">
            <img src="../../images/liushuxue/choclate_icon.png" alt="">
            <p>巧克力</p>
          </a>
        </li>
      </ul>
    </div>
    <!-- 四个 -->
    <div class="flower_four">
      <ul>
        <li>
          <a href="javascript:;">
            <img src="../../images/liushuxue/cate-love.png" alt="">
            <p>鲜花</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="../../images/liushuxue/cate-friend.png" alt="">
            <p>永生花</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="../../images/liushuxue/cate-parent.png" alt="">
            <p>蛋糕</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="../../images/liushuxue/cate-business.png" alt="">
            <p>礼品</p>
          </a>
        </li>
      </ul>
    </div>
    <!-- 鲜花精选 -->
     <div class="flower_choose">
       <div class="title">
         <span></span>
         <h3>鲜花精选</h3>
         <span></span>
       </div>
       <div class="f_choose_img">
         <ul>
           <li v-for="item in flowerlist" :key="item.id">
             <a href="/#/commodity">
               <img :src="item.src">
               <p>{{item.flower}}</p>
               <p>{{item.description}}
               </p>
               <p>{{item.price}}</p>
             </a>
           </li>
           <!-- <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/9010011.jpg" alt="">
               <p>鲜花/一心一意</p>
               <p>玫瑰11支,粉色勿忘我0.3扎
               </p>
               <p>
                 ￥166
               </p>
             </a>
           </li> -->
         </ul>
       </div>
       <div class="f_more">
         <a href="javascript:;">
           全部鲜花
           <span class="glyphicon glyphicon-menu-right"></span>
         </a>
       </div>
     </div>
     <!-- 永生花精选 -->
     <div class="flower_choose">
       <div class="title">
         <span></span>
         <h3>永生花精选</h3>
         <span></span>
       </div>
       <div class="f_choose_img">
         <ul>
           <li v-for="item in foreverflowers" :key="item.id">
             <a href="javascript:;">
               <img :src="item.src" alt="">
                <p>{{item.flower}}</p>
               <p>{{item.description}}
               </p>
               <p>{{item.price}}</p>
             </a>
           </li>
           <!-- <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/1073092.jpg" alt="">
               <p>永生花/恋心</p>
               <p>蓝色永生玫瑰＋紫色永生玫瑰
               </p>
               <p>
                 ￥999
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/1073092.jpg" alt="">
               <p>永生花/恋心</p>
               <p>蓝色永生玫瑰＋紫色永生玫瑰
               </p>
               <p>
                 ￥999
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/1073092.jpg" alt="">
               <p>永生花/恋心</p>
               <p>蓝色永生玫瑰＋紫色永生玫瑰
               </p>
               <p>
                 ￥999
               </p>
             </a>
           </li> -->
         </ul>
       </div>
       <div class="f_more">
         <a href="javascript:;">
           全部永生花
           <span class="glyphicon glyphicon-menu-right"></span>
         </a>
       </div>
     </div>
     <!-- 礼品精选 -->
     <div class="flower_choose">
       <div class="title">
         <span></span>
         <h3>礼品精选</h3>
         <span></span>
       </div>
       <div class="f_choose_img">
         <ul>
           <li v-for="item in presentflowers" :key="item.id">
             <a href="javascript:;">
                <img :src="item.src" alt="">
                <p>{{item.flower}}</p>
               <p>{{item.description}}
               </p>
               <p>{{item.price}}</p>
             </a>
           </li>
           <!-- <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/1065041.jpg" alt="">
               <p>礼品/雪人房子LED灯水晶球音乐盒</p>
               <p>曲目《天空之城》
               </p>
               <p>
                 ￥168
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/1065041.jpg" alt="">
               <p>礼品/雪人房子LED灯水晶球音乐盒</p>
               <p>曲目《天空之城》
               </p>
               <p>
                 ￥168
               </p>
             </a>
           </li>
           <li>
             <a href="javascript:;">
               <img src="../../images/liushuxue/1065041.jpg" alt="">
               <p>礼品/雪人房子LED灯水晶球音乐盒</p>
               <p>曲目《天空之城》
               </p>
               <p>
                 ￥168
               </p>
             </a>
           </li> -->
         </ul>
       </div>
       <div class="f_more">
         <a href="javascript:;">
           全部礼品
           <span class="glyphicon glyphicon-menu-right"></span>
         </a>
       </div>
     </div>
     <!-- 选择理由 -->
     <div class="flower_choose">
        <img class="choose_reason" src="../../images/liushuxue/m-brand.png" alt="">
     </div>
     <!-- 花语大全 -->
     <div class="flower_choose lang">
         <ul>
           <li>
             <a href="javascript:;">
              花语大全
             </a>
           </li>
           <li>
             <a href="javascript:;">
              查单
             </a>
           </li>
            <li>
             <a href="javascript:;">
              关于我们
             </a>
           </li>
         </ul>
     </div>
     <!-- 客户端 -->
      <div class="customer">
         <ul>
           <li>
             <a href="javascript:;">
              <span></span> 
             </a>
           </li>
           <li>
             <a href="javascript:;">
              <span></span> 
             </a>
           </li>
         </ul>
     </div>
     <!-- 版权 -->
     <div class="copyright">
       <p>
         Copyright © 2005~2018 花礼网(中国鲜花礼品网) 版权所有
         <br>
        中国鲜花网领先品牌，鲜花速递专家！
       </p>
       <span class="glyphicon glyphicon-upload"></span>
     </div> 
     <footers></footers>
  </div>
</template>

<script>
import footers from './footer.vue';
import swiperData from './data/swiper.json';
import flowerData from './data/flower.json';
import foreverData from './data/forever.json';
import presentData from './data/present.json';
   export default {
     data(){
      return {
        list:[],
        flowerlist: [],
        foreverflowers: [],
        presentflowers: [],
        }
     },
    created() {
      this.getSwiper();
      this.getflowers();
      this.getforeverflowers();
      this.getpresentflowers();
    },
    methods: {
      getSwiper() {
        this.list = swiperData;
      },
      getflowers() {
        this.flowerlist = flowerData;
      },
      getforeverflowers() {
        this.foreverflowers = foreverData;
      },
      getpresentflowers() {
        this.presentflowers = presentData;
      }
    },
    components: {
     footers
   }
}; 
</script>
<style lang="css" scoped>
.layout {
 background-color: #eee;
}
  /* 头部 */
 header {
   width: 100%;
   height: 42px;
   background-color: #fff;
 }
.h_img {
  width: 70px;
  height: 16px;
  margin: 12px 0 11px 16px;
  position: absolute;
}
.h_txtfather {
 float: left;
 position: relative;
 padding-left: 102px;
 padding-right: 74px;
 padding-top: 7px;
 width: 100%;
 height: 42px;
 box-sizing: border-box;
}
.h_txt {
 width: 100%;
 height: 28px;
 border-radius: 5px;
 border: none;
 background-color: #f5f5f5;
 padding-left: 29px;
 font-size: 12px;
 box-sizing: border-box;
 outline: 0;
}
.h_span {
 position: absolute;
 margin-top: 13px;
 margin-left: 8px;
 color: #b5b5b5;
 font-size: 14px;
}
.h_login {
  position: absolute;
  top: 15px;
  z-index: 2;
  color: #494949;
  font-size: 12px;
  right: 25px;
}
/* 轮播图 */
.swiper_father {
  height: 200px;
}
.swipe {
  width: 100%;
}
.swipe img {
  width: 100%;
  height: 100%;
}
.identification {
  border-bottom: 1px solid #eee;
  background-color: #fff;
}
.identification ul {
  overflow: hidden;
  margin-bottom: 0;
}
.identification ul li {
 float: left;
 width: 25%;
 line-height: 27px;
 text-align: center;
 position: relative;
}
.identification ul li p {
 font-size: 12px;
 margin-bottom: 0;
 color: #b4b4a8;
}
.identification ul li p a {
  text-decoration: underline;
  color: #494949;
}
.identification ul li p:before {
 content: "";
 display: inline-block;
 width: 5px;
 height: 5px;
 background-color: #bcaccc;
 border-radius: 50%;
 margin-right: 5px;
}
 /* 鲜花 */
.flower {
  border-bottom: 1px solid #eee;
  padding-top: 11px;
  background-color: #fff;
}
.flower ul {
 overflow: hidden;
}
.flower ul li {
  float: left;
  text-align: center;
  width: 20%;
}
.flower ul li a img {
 width: 48px;
 height: 48px;
}
.flower ul li a p {
  font-size: 12px;
  color: #494949;
  margin-top: 5px;
  margin-bottom: 5px;
}
 /* 四个 */
.flower_four {
  border-bottom: 1px solid #eee;
  padding-top: 11px;
  padding-bottom: 11px;
  background-color: #fff;
}
.flower_four ul {
 overflow: hidden;
}
.flower_four ul li {
  float: left;
  text-align: center;
  width: 25%;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}
.flower_four ul li:last-child {
   border-right: none;
}
.flower_four ul li a img {
 width: 48px;
 height: 48px;
}
.flower_four ul li a p {
  font-size: 12px;
  color: #494949;
  margin-top: 5px;
}
/* 鲜花精选 */
.flower_choose {
  margin-top: 7px;
  background-color: #fff;
}
.title {
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: relative;
}
.title h3 {
  font-weight: 400;
  line-height: 45px;
  font-size: 18px;
  width: 90px;
  margin: 0 auto;
}
.title span:first-child,
.title span:last-child {
  display: block;
  width: 36px;
  height: 1px;
  background-color: #bbb;
  line-height: 45px;
  position: absolute;
  top: 20px;
}
.title span:first-child {
  left: 36%;
}
.title span:last-child {
   right: 36%;
}
.f_choose_img ul {
  overflow: hidden;
}
.f_choose_img ul li {
  float: left;
  width: 50%;
  border: 1px solid #efefef;
  box-sizing: border-box;
  padding: 3px;
}
.f_choose_img ul li img {
  width: 100%;
  height: 100%;
}
.f_choose_img ul li p {
  padding-left: 8px;
}
.f_choose_img ul li p:nth-child(2) {
  color: #232323;
  font-size: 14px;
}
.f_choose_img ul li p:nth-child(3) {
 color: #777799;
 font-size: 12px;
}
.f_choose_img ul li p:last-child {
 color: #222;
 font-size: 14px;
}
.f_more {
  text-align: center;
  line-height: 65px;
}
.f_more a {
  color: #777;
  font-size: 14px;
  display: inline-block;
  width: 120px;
  line-height: 34px;
  border: 1px solid #ddd;
}
.f_more a span {
  font-size: 8px;
  margin-left: -3px;
}
 /* 选择理由 */
.choose_reason {
  width: 100%;
  height: 100%;
}
 /* 花语大全 */
.lang {
  border: 1px solid #eee;
  line-height: 58px;
}
.lang ul {
  overflow: hidden;
}
.lang ul li {
 float: left;
 width: 30%;
 text-align: center;
}
.lang ul li a {
  font-size: 12px;
  color: #444;
  background-color: #eee;
  padding: 7px 18px;
}
 /* 客户端 */
.customer {
 border: 1px solid #eee;
 background-color: #fff;
 height: 102px;
}
.customer ul {
 overflow: hidden;
 padding-top: 21px;
}
.customer ul li {
  float: left;
  text-align: center;
  width: 50%;
}
.customer li:nth-child(1) span {
  background: url('../../images/liushuxue/icon-phonenew.png') center center no-repeat;
  display: inline-block;
  width: 40px;
  height: 60px;
  background-size: 38px 59px;
}
.customer li:nth-child(2) span {
  background: url('../../images/liushuxue/icon-kefu.png') center center no-repeat;
  display: inline-block;
  width: 40px;
  height: 60px;
  background-size: 38px 59px;
}
 /* 版权 */
.copyright {
  position: relative;
  margin-bottom: 55px;
  height: 80px;
  padding-top: 20px;
  background-color: #fff;
}
.copyright p {
 text-align: center;
}
.copyright span {
  position: absolute;
  top: 5px;
  right: 20px;
  font-size: 60px;
  color: #ccc;
}
</style>

